import React, { Component } from 'react'
import { Card, Table, Button, Modal, Form, Input, Tree, message } from 'antd'
// 导入防抖函数
import { antiShake } from "../../utils/antiShake"
import http from "../../api"
import getTime from "../../config/huoQuDate"

export default class RoleManagement extends Component {
  columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '创建时间',
      dataIndex: 'create_tiem',
      key: 'create_tiem',
    },
    {
      title: '授权时间',
      dataIndex: 'auth_time',
      key: 'auth_time',
    },
    {
      title: '授权人',
      dataIndex: 'auth_name',
      key: 'auth_name',
    },
  ]
  treeData = [
    { title: '首页', key: 'home' },
    {
      title: '商品', key: 'commodity', children: [
        { title: '品类管理', key: 'classification' },
        { title: '商品管理', key: 'administration' },
      ]
    },
    { title: '用户管理', key: 'user' },
    { title: '角色管理', key: 'role' },
    {
      title: '图像图表', key: 'chart', children: [
        { title: '柱形图', key: 'column' },
        { title: '折线图', key: 'line' },
        { title: '饼图', key: 'pie' },
      ]
    },
  ]
  state = { roles: [], role: {}, name: '', power: [], visible1: false, visible2: false, }
  componentDidMount() {
    this.getRoles()
  }
  // 获取数据
  getRoles = async() => {
    const { data } = await http.get('/rest/role/whole')
    this.setState({ roles: data })
  }
  // 创建角色按钮回调，弹出框
  oneShowModal = () => {
    this.setState({ visible1: true })
  }
  // 权限设置按钮回调，弹出框
  twoShowModal = () => {
    this.setState({ visible2: true })
  }
  // 创建角色,弹出框确认按钮回调
  oneHideModal = async() => {
    const { name } = this.state
    const patt = /[ ]/g
    if (patt.test(name) || !name) {
      return message.error('角色名称不能为空,也不得有空格')
    }
    // 获取创建时间
    const create_tiem = getTime()
    // 创建角色数据提交
    const { data } = await http.post('/rest/role', { name, create_tiem })
    this.getRoles()
    message.success(data.message)
    this.setState({ visible1: false })
  }
  // 权限设置,弹出框确认按钮回调
  twoHideModal = async() => {
    const { power } = this.state
    if(!power.length) return message.error('请选择权限')
    // 获取设置权限时间
    const auth_time = getTime()
    const { _id } = this.state.role
    // 获取授权人
    const auth_name = localStorage.getItem('grain_name')
    // 更新角色权限数据
    const { data } = await http.post('/rest/role/update', { _id, auth_time, power, auth_name })
    this.getRoles()
    message.success(data.message)
    this.setState({ visible2: false, power: [] })
  }
  // 点击复选框触发
  onCheck = (checkedKeys) => {
    // 获取复选框勾选的权限
    this.setState({ power: checkedKeys })
  }
  render() {
    const { roles, role, visible1, visible2 } = this.state
    const title = (
      <>
        <Button type="primary" onClick={this.oneShowModal}>创建角色</Button>&nbsp;&nbsp;
        <Button type="primary" onClick={this.twoShowModal} disabled={!role.name}>设置角色权限</Button>
      </>
    )
    return (
      <>
        <Card title={title}>
          <Table
            bordered={true}
            dataSource={roles}
            columns={this.columns}
            pagination={{
              pageSize: 5,
              position: ['bottomCenter'],
            }}
            rowSelection={{
              type: 'radio',
              onChange: (_, selectedRows) => {
                this.setState({ role: selectedRows[0] })
              }
            }}
          />
        </Card>
        {
          visible1 && <Modal
            title="创建角色"
            visible={visible1}
            onOk={this.oneHideModal}
            onCancel={() => { this.setState({ visible1: false }) }}
            okText="确认"
            cancelText="取消"
          >
            <Form>
              <Form.Item
                name="name"
                label="角色名称"
                rules={[{ required: true, pattern: /^[^ ]+$/g, message: '角色名称不能为空,也不得有空格' }]}
              >
                <Input
                  placeholder="请输入角色名称"
                  autoFocus={true}
                  onChange={(e) => {
                    antiShake(500, () => {
                      this.setState({ name: e.target.value })
                    })
                  }
                  }
                />
              </Form.Item>
            </Form>
          </Modal>
        }
        {
          visible2 && <Modal
            title="设置角色权限"
            visible={visible2}
            onOk={this.twoHideModal}
            onCancel={() => { this.setState({ visible2: false, power: [] }) }}
            okText="确认"
            cancelText="取消"
          >
            <Form.Item label="角色名称">
              <Input disabled={true} placeholder={role.name} />
            </Form.Item>
            <Tree
              checkable
              // 是否可选中
              selectable={false}
              // 默认展开指定的树节点
              defaultExpandedKeys={['commodity', 'chart']}
              defaultCheckedKeys={role.power}
              // 点击复选框触发
              onCheck={this.onCheck}
              treeData={this.treeData}
            />
          </Modal>
        }
      </>
    )
  }
}
